<script>
/***
 基础单视频组件：展示视频图片、弹幕、播放量
 props: 接收一个VideoItem（包含属性 url, viewCount, barrageCount, videoTitle, id）类
 */

import useRouterNameInfoStore from "@/stores/router-name";
import {computed} from "vue";
import {numberFormat} from '@/utils/utils'

export default {
  // 视频展示组件
  name: "VideoBox",
  methods: {numberFormat},
  props:{
    videoItem:{
      type:Object,
      required: true,
      validator: function (value){
        return (
            'thumbnail' in value &&
            'viewCount' in value &&
            'barrageCount' in value &&
            'title' in value &&
            'id' in value);
      }
    },

  },

  setup(){
    const routerNameInfoStore = useRouterNameInfoStore()
    const  routeName = computed(()=>routerNameInfoStore.playVideo)
    return {
      routeName
    }
  },

}
</script>

<template>
  <router-link :to="{name:routeName, params:{video_id:videoItem.id}}"  class="video-box">
  <div class="top-img">
    <el-image :src="videoItem.thumbnail" fit="cover"/>
    <div class="count">
<!--      播放量-->
      <span>
         <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-bofangshu"></use>
        </svg>
        {{numberFormat(videoItem.viewCount)}}
      </span>
<!--      弹幕量-->
      <span>
          <span>
         <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-danmushu"></use>
        </svg>
      </span>
        {{numberFormat(videoItem.barrageCount)}}
      </span>
    </div>
  </div>
  <p class="bottom-title">
    {{ videoItem.title }}
  </p>
  </router-link>
</template>

<style scoped>
span{
  display: flex;
  align-items: center;
}

.video-box{
  width: 50%;
  padding: 2.13333vmin 1.33333vmin;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}
.top-img{
  position: relative;
  height: 25.88121vmin;
  width: 100%;
}
.top-img .el-image{
  width: 100%;
  height: 100%;
}
.count{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 3.2vmin;
  padding: 1.33333vmin 1.6vmin;
  display: flex;
  justify-content: space-between;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent);
  box-sizing: border-box;
}
.icon{
  font-size: 4.26667vmin;
  color: #fff;
  margin-right: 1.33333vmin;
}

.bottom-title{
  font-size: 3.2vmin;
  margin-top: 1.6vmin;
  color: #212121;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

</style>